<template>
  <div class="vivid-menu-contianer">
    <ul class="vivid-menu-list" :class="{ 'vertical': mode === 'vertical' }">
      <slot></slot>
    </ul>
  </div>
</template>

<script lang="ts">
import { ref } from 'vue'
type MenuMode = 'horizontal' | 'vertical'
export default {
  name: 'ViMenu',
  props: {
    mode: {
      type: String as () => MenuMode,
      default: 'horizontal' // vertical or horizontal
    }
  },
  provide() {
    return {
      menu: this
    }
  },
  setup(props, { emit }) {
    const activeIndex = ref(0)
    const setActiveIndex = (index: number) => {
      activeIndex.value = index
      emit('update:activeIndex', index)
    }
    return {
      activeIndex,
      setActiveIndex
    }
  }
}
</script>

<style scoped lang="scss">
.vivid-menu-contianer {
  display: block;
  overflow-y: scroll;
}

.vivid-menu-list {
  overflow-x: auto;
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;

  &::-webkit-scrollbar {
    display: none;
    height: 0;
    width: 0;
  }
}

.vivid-menu-list.vertical {
  width: 10rem;
  flex-direction: column;
}
</style>
